<template>
  <div id="AddoutsourcingTable">
    <div class="AddoutsourcingTable">
      <el-table
        height="400px"
        ref="Table"
        :data="tableData"
        style="width: 100%"
        border
      >
        <el-table-column
          v-for="(item, index) of headData"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
        >
          <template slot-scope="scope">
            <div v-if="item.slot">
              <slot :name="item.prop" v-bind:row="scope.row"></slot>
            </div>
            <div v-if="!item.slot">
              {{ tableData[scope.$index][item.prop] }}
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
export default {
  name: "AddoutsourcingTable",
  data() {
    return {};
  },
  props: {
    headData: {
      type: Array,
      default: () => [],
    },
    tableData: {
      type: Array,
      default: () => [],
    },
  },
  methods: {},

  mounted() {
    console.log(this.headData);
  },
};
</script>
  <style lang="less" scoped>
.pagination {
  text-align: right;
  margin-top: 20px;
}
</style>
<style>
.AddoutsourcingTable .el-table th.el-table__cell {
  text-align: center;
  background: #f8f8f9;
  padding: 5px 0;
}
.AddoutsourcingTable .el-table .el-table__cell {
  text-align: center;
  padding: 0;
  font-size: 14px;
}
</style>